// 近七天支付工具明细
<template>
    <div class="gradient-content full-width full-height">
        <el-table :data="tableData" :max-height="height">
            <el-table-column label="支付工具" prop="tag_campaign" ></el-table-column>
            <el-table-column label="金额$" prop="total_price" sortable></el-table-column>
            <el-table-column label="占比$" prop="percentage" sortable></el-table-column>
        </el-table>
    </div>
</template>

<script>
import { Chart } from '@antv/g2'
export default {
    props: {
        idName: {
            type: String,
            default: 'advertisingRanking',
        },
        chartData: {
            type: Array,
            default: () => [],
        },
        tableData: {
            type: Array,
            default: () => [],
        },
    },
    watch: {
        chartData(val) {
            this.chart.changeData(val)
        },
    },
    data() {
        return {
            chart: null,
            height: 0,
        }
    },
    mounted() {
        this.$nextTick(() => {
            const boxContElement = document.querySelector(`.gradient-content`)
            this.height = boxContElement.clientHeight

            this.render()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.destroy()
    },
    methods: {
        render() {
            // Step 1: 创建 Chart 对象
            this.chart = new Chart({
                container: this.idName,
                height: this.height,
                autoFit: true,
                padding: [30, 40, 30, 60],
            })
            // Step 2: 载入数据源
            this.chart.data(this.chartData)
            this.chart.axis(true)
            this.chart.scale({
                spend: {
                    min: 100,
                    alias: '销售额',
                    nice: true,
                },
            })
            // Step 3：创建图形语法，绘制柱状图，由 spend 和 advertiser_id 两个属性决定图形位置，advertiser_id 映射至 x 轴，spend 映射至 y 轴
            this.chart
                .interval()
                .position('advertiser_id*spend')
                // .label('spend', {
                //     style: {
                //         fill: '#fff',
                //     },
                // })
                // .color('advertiser_id')
            // Step 4: 渲染图表
            this.chart.render()
        },
    },
}
</script>

<style scoped>
.el-table {
    color: #fff;
    background: transparent;
}
::v-deep .el-table tr {
    background: transparent;
}
::v-deep .el-table th.is-leaf,
::v-deep .el-table td {
    border-bottom: 1px solid rgba(255,255,255,0.3);
}
.el-table::before {
    background: rgba(255,255,255,0.3);
}
::v-deep .el-table .el-table__row:hover {
    background: rgb(16, 25, 80);
}
::v-deep .el-table.el-table--enable-row-hover .el-table__body tr:hover > td {
    background: rgb(16, 25, 80);
}
::v-deep .el-table .el-table__header-wrapper th {
    color: #fff;
    background: transparent;
}
::v-deep .el-table .el-table__header-wrapper th:hover {
    background: rgb(16, 25, 80);
}
.ellipsis-2 {
    width: 100%;
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
</style>